<template>
    <div class="jianzhan-content">
        <crumb :name="$t('human.human')"></crumb>
        <div style="text-align: left;margin: 10px 0">
            <el-button type="primary" icon="el-icon-plus" @click="dialogVisible = true">{{$t('human.add')}}</el-button>
        </div>
        <div class="flex-content">
            <div class=" f4">
                <div class="table-wrapper">
                    <div style="text-align: left">
                        <el-input v-model="basicSalary" :placeholder="$t('human.basicSalary')" size="small" style="width: 200px;"></el-input>
                        <el-input v-model="positionNumber" :placeholder="$t('human.positionNumber')" size="small" style="width: 200px;"></el-input>
                        <el-input v-model="position" :placeholder="$t('human.position')" size="small" style="width: 200px;"></el-input>
                    </div>
                    <el-table
                            border
                            stripe
                            :data="humanLists"
                            >
                        <el-table-column
                                prop="positionNumber"
                                :label="$t('human.positionNumber')"
                               >
                        </el-table-column>
                        <el-table-column
                                prop="position"
                                :label="$t('human.position')"
                                >
                        </el-table-column>
                        <el-table-column
                                prop="basicSalary"
                                :label="$t('human.basicSalary')">
                        </el-table-column>
                        <el-table-column
                                prop="pointRate"
                                :label="$t('human.pointRate')">
                        </el-table-column>
                        <el-table-column
                                prop="monthlyAllowance"
                                :label="$t('human.monthlyAllowance')">
                        </el-table-column>
                        <el-table-column
                                prop="attendanceAllowance"
                                :label="$t('human.attendanceAllowance')">
                        </el-table-column>
                        <el-table-column
                                prop="specialAllowance"
                                :label="$t('human.specialAllowance')">
                        </el-table-column>
                        <el-table-column
                                prop="overTime"
                                :label="$t('human.overTime')">
                        </el-table-column>
                        <el-table-column
                                prop="personalSalary"
                                :label="$t('human.personalSalary')">
                        </el-table-column>
                        <el-table-column
                                prop="totalSalary"
                                :label="$t('human.totalSalary')">
                        </el-table-column>
                        <el-table-column :label="$t('operate')">
                            <template slot-scope="scope">
                                <el-button type="text" size="mini" @click="edit(scope.row)">{{$t('edit')}}</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
            </div>
        </div>
        <div style="margin-top: 20px;">
            <div class="text-center">
                <vue2-org-tree name="test"
                               :data="data1"
                               :props="{
                                        label:'position',
                                        children:'manPowerServiceStationDtoList',
                                        expand:'expand'
                                   }"
                               :horizontal="horizontal"
                               :collapsable="false"
                               selectedKey="id"
                               :labelClassName="cls"
                               selectedClassName="bg-blue"
                               :renderContent="renderContent"
                               @on-expand="onExpand"
                               @on-node-click="onNodeClick"
                ></vue2-org-tree>
            </div>
        </div>
        <el-dialog
                :title="$t('human.human')"
                :visible.sync="dialogVisible"
                width="80%"
        >
            <el-form ref="form" :model="dept" label-width="180px">
                <el-form-item :label="$t('human.department')">
                    <el-cascader
                            @change="change"
                            style="width: 250px"
                            :show-all-levels="false"
                            v-model="human.deptId"
                            :options="data"
                            :props="{
                                checkStrictly:true,
                                value:'deptId',
                                label:'deptName',
                                children:'deptList'
                            }"
                    ></el-cascader>
                </el-form-item>
                <el-form-item :label="$t('human.leader')">
                    <el-cascader
                            :options="data1"
                            style="width: 250px;"
                            :show-all-levels="false"
                            :props="{
                                checkStrictly:true,
                                value:'id',
                                label:'position',
                                children:'manPowerServiceStationDtoList'
                            }"
                            v-model="human.parentId"
                            ></el-cascader>
                </el-form-item>
                <el-form-item :label="$t('human.positionNumber')">
                    <el-input v-model="human.positionNumber" :placeholder="$t('human.positionNumber')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.position')">
                    <el-input v-model="human.position" :placeholder="$t('human.position')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.basicSalary')">
                    <el-input v-model="human.basicSalary" :placeholder="$t('human.basicSalary')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.pointRate')">
                    <el-input v-model="human.pointRate" :placeholder="$t('human.pointRate')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.monthlyAllowance')">
                    <el-input v-model="human.monthlyAllowance" :placeholder="$t('human.monthlyAllowance')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.attendanceAllowance')">
                    <el-input v-model="human.attendanceAllowance" :placeholder="$t('human.attendanceAllowance')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.specialAllowance')">
                    <el-input v-model="human.specialAllowance" :placeholder="$t('human.specialAllowance')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.overTime')">
                    <el-input v-model="human.overTime" :placeholder="$t('human.overTime')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.personalSalary')">
                    <el-input v-model="human.personalSalary" :placeholder="$t('human.personalSalary')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.jobResponsibilities')">
                    <el-input v-model="human.jobResponsibilities" :placeholder="$t('human.jobResponsibilities')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.totalSalary')">
                    <el-input v-model="human.totalSalary" :placeholder="$t('human.totalSalary')"></el-input>
                </el-form-item>
                <el-form-item :label="$t('human.remarks')">
                    <el-input v-model="human.remarks" :placeholder="$t('human.remarks')"></el-input>
                </el-form-item>

            </el-form>
            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">{{$t('cancel')}}</el-button>
            <el-button type="primary" @click="submitForm">{{$t('confirm')}}</el-button>
          </span>
        </el-dialog>
    </div>
</template>

<script>
    import crumb from '../../components/common/crumb'
    import {addHumanResource, getDepartmentList, getHumanResource, humanList, modHumanResource} from "../../api";
    import {ERROR_OK} from "../../util/config";
    export default {
        name: "department",
        components:{
            crumb
        },
        created(){
            this.getDepartment();
            this.getHuman();
            this.getHumanList();
        },
        data() {
            return {
                data: {},
                data1:{},
                basicSalary:'',
                position:'',
                positionNumber:'',
                humanList:[],
                human:{
                    id:'',
                    parentId:'',
                    deptId:'',
                    positionNumber:'',
                    position:'',
                    basicSalary:'',
                    pointRate:'',
                    monthlyAllowance:'',
                    attendanceAllowance:'',
                    specialAllowance:'',
                    overTime:'',
                    personalSalary:'',
                    totalSalary:'',
                    remarks:'',
                    jobResponsibilities:'',
                },
                dialogVisible:false,
                cls:'bg-chocolate'
            }
        },
        computed:{
            humanLists(){
                return this.humanList.filter(item => item.basicSalary.includes(this.basicSalary))
                .filter(item => item.positionNumber.includes(this.positionNumber))
                .filter(item => item.position.includes(this.position))
            }
        },
        methods: {
            async getHumanList(){
                const {status,data} = await humanList({
                    deptId:this.deptId,
                    basicSalary:this.basicSalary,
                    position:this.position,
                    positionNumber:this.positionNumber
                });
                if(status === ERROR_OK) {
                    this.humanList = data;
                }
            },
            async getHuman(){
                const {status,data} = await getHumanResource();
                if(status===ERROR_OK){
                    this.data1 = data[0]
                }
            },
            clear(){
                this.human = {
                    id:'',
                    parentId:'',
                    deptId:'',
                    positionNumber:'',
                    position:'',
                    basicSalary:'',
                    pointRate:'',
                    monthlyAllowance:'',
                    attendanceAllowance:'',
                    specialAllowance:'',
                    overTime:'',
                    personalSalary:'',
                    totalSalary:'',
                    remarks:'',
                    jobResponsibilities:'',
                }
            },
            change(val){
                console.log(val);
            },
            async getDepartment(){
                const {status,data} = await getDepartmentList();
                if(status === ERROR_OK)     {
                    this.data = data[0]
                }
            },
            async submitForm(){
                const {id,parentId,deptId,positionNumber,position,
                    basicSalary,pointRate,monthlyAllowance,
                    attendanceAllowance,specialAllowance,
                    overTime,personalSalary,totalSalary,
                    remarks,jobResponsibilities
                } = this.human;
                let pid,did;
                if(parentId && parentId.length){
                    pid = parentId[parentId.length-1]
                } else if(parentId){
                    pid= parentId
                } else {
                    pid=0;
                }
                if(deptId&& deptId.length) {
                    did = deptId[deptId.length-1]
                } else if(deptId){
                    did = deptId
                } else  {
                    this.$message.error('Please Choose Department');
                    return
                }
                if(!id){
                     const {status,msg} = await addHumanResource({
                         positionNumber,
                         position,
                         basicSalary,
                         pointRate,
                         monthlyAllowance,
                         attendanceAllowance,
                         specialAllowance,
                         overTime,
                         personalSalary,
                         totalSalary,
                         remarks,
                         jobResponsibilities,
                         parentId:pid,
                         deptId:did
                     });
                     if(status=== ERROR_OK) {
                         this.$message.success('Add Man Power Successfully');
                         this.getHumanList();
                         this.clear();
                         this.dialogVisible = false

                     }else {
                         this.$message.error(msg)
                     }
                } else {
                    const {status,msg} = await modHumanResource({
                        id,
                        positionNumber,
                        position,
                        basicSalary,
                        pointRate,
                        monthlyAllowance,
                        attendanceAllowance,
                        specialAllowance,
                        overTime,
                        personalSalary,
                        totalSalary,
                        remarks,
                        jobResponsibilities,
                        parentId:pid,
                        deptId:did
                    });
                    if(status=== ERROR_OK) {
                        this.$message.success('Modify Man Power Successfully');
                        this.getHumanList();

                        this.clear();
                        this.dialogVisible = false
                    }else {
                        this.$message.error(msg)
                    }
                }
            },
            renderContent(h, data) {
                return (
                    <el-dropdown >
                        <span class="el-dropdown-link white">
                            {data.position}
                        </span>
                        <el-dropdown-menu slot="dropdown" >
                            <el-dropdown-item  nativeOnClick={() => this.handleCommand('edit',data)}>{this.$t('edit')}</el-dropdown-item>
                        </el-dropdown-menu>
                    </el-dropdown>
                )
            },
            handleCommand(key,node){
                switch (key){
                    case 'edit':
                        this.edit(node);
                        break;
                    case 'del':
                        this.deleteDept(node);
                        break;
                }
            },
            edit(node){
                this.human = {
                    id:node.id,
                    positionNumber:node.positionNumber,
                    position:node.position,
                    basicSalary:node.basicSalary,
                    pointRate:node.pointRate,
                    monthlyAllowance:node.monthlyAllowance,
                    attendanceAllowance:node.attendanceAllowance,
                    specialAllowance:node.specialAllowance,
                    overTime:node.overTime,
                    personalSalary:node.personalSalary,
                    totalSalary:node.totalSalary,
                    remarks:node.remarks,
                    jobResponsibilities:node.jobResponsibilities,
                };
                this.$set(this.human,'parentId',node.parentId);
                this.$set(this.human,'deptId',node.deptId);
                this.dialogVisible = true;

            },
            onExpand(e,data) {
                console.log(data);
                if ("expand" in data) {
                    data.expand = !data.expand;
                    if (!data.expand && data.children) {
                        this.collapse(data.children);
                    }
                } else {
                    this.$set(data, "expand", true);
                }
            },
            onNodeClick(e, data) {
                console.log(data);
                // alert(data.label);
            },
            collapse(list) {
                let _this = this;
                list.forEach(function(child) {
                    if (child.expand) {
                        child.expand = false;
                    }
                    child.children && _this.collapse(child.children);
                });
            },
            expandChange() {
                this.toggleExpand(this.data, true);
            },
            toggleExpand(data, val) {
                let _this = this;
                if (Array.isArray(data)) {
                    data.forEach(function(item) {
                        _this.$set(item, "expand", val);
                        if (item.children) {
                            _this.toggleExpand(item.children, val);
                        }
                    });
                } else {
                    this.$set(data, "expand", val);
                    if (data.children) {
                        _this.toggleExpand(data.children, val);
                    }
                }
            }
        },
    }
</script>

<style  lang="scss" >
    .bg-chocolate{
        cursor: pointer !important;
        background: #409eff;
    }
    .white{
        color: white;
    }
    .bg-blue{
        background-color:#409eff;
    }
    .flex-content{
        display: flex;
    }
    .f4{
        flex: 3;
    }
    .f1{
        flex:2;
    }
</style>